<template>
	<view class="chat-page" :style="{height: pageHeight}">

		<!-- 要群发的人 -->
		<view class="group-send-info" v-if="imType === 'MASS'">
			<view class="title"><text>你将发送消息给{{massTempData.length}}位朋友：</text></view>
			<view class="user-list">
				<text>
					<block v-for="(item, index) in massTempData">
						{{item.name}}{{index < massTempData.length - 1 ? '、' : ''}}</block>
				</text>
			</view>
		</view>


		<view class="body">
			<scroll-view class="message-list" scroll-y @click="hideDrawer" :scroll-with-animation="scrollAnimation"
				:scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory"
				upper-threshold="50">
				<view class="flex flex-jc-c u-m-20" v-if="isHistoryLoading">
					<u-loading mode="circle"></u-loading>
				</view>

				<!-- 消息样式 class="me": 自己发的消息 class="other": 别人发的消息 -->
				<block v-for="(item, index) in messageList" :key="index">
					<view class="item" v-if="item.payload.data !== 'chat' && item.from !== '@TIM#SYSTEM'"
						:class="{me: item.flow ==='out', other: item.flow !=='out',bgWhite: item.payload.data === 'share'}"
						:id="item.ID">
						<view class="avatar" @click="onJumpMemnerDetails(item)">
							<image class="img" :src="item.avatar || timUserInfo.img" mode="scaleToFill"></image>
						</view>
						<view class="content-box">
							<view class="horn"></view>
							<block v-if="item.type === 'TIMTextElem'">
								<rich-text :nodes="nodesFliter(item.payload.text)" v-if="item.payload.text"></rich-text>
							</block>
							<block v-if="item.type === 'TIMCustomElem'">
								<text v-if="item.payload.data === 'group_create'">创建群</text>
								<!-- 图片消息展示样式 -->
								<image class="img" :src="item.payload.description"
									v-if="item.payload.data === 'chatFile' && ((isJSON(item.payload.extension) && isJSON(item.payload.extension).type === 'img') || item.payload.extension === 'img')"
									mode="widthFix" @click="onClickImg(item.payload.description)" />

								<!-- 语音消息样式 -->
								<block
									v-else-if="isJSON(item.payload.extension) && isJSON(item.payload.extension).type === 'mp3'">
									<view class="voice" v-if="item.flow !=='out'" @click="handleAudio(item)"
										:style="{width: isJSON(item.payload.extension) ? Number(isJSON(item.payload.extension).contentDuration) * 2 + 80 + 'rpx' : '130rpx'}">
										<view class="icon-yuyin"></view>
										<text
											v-if="isJSON(item.payload.extension)">{{ isJSON(item.payload.extension).contentDuration}}'</text>
									</view>
									<view class="voice" v-else @click="handleAudio(item)"
										:style="{width: isJSON(item.payload.extension) ? Number(isJSON(item.payload.extension).contentDuration) * 2 + 80 + 'rpx' : '130rpx'}">
										<text
											v-if="isJSON(item.payload.extension)">{{ isJSON(item.payload.extension).contentDuration}}'</text>
										<view class="icon-yuyin"></view>
									</view>
								</block>

								<!-- 视频消息 -->
								<block
									v-else-if="isJSON(item.payload.extension) && isJSON(item.payload.extension).type === 'mp4'">
									<!-- <image class="video" :src="item.payload.description + '?x-oss-process=video/snapshot,t_0,f_jpg'"></image> -->
									<view class="video" @click="onPlayVideo(item.payload.description)">
										<view class="icon-play">
											<u-icon class="icon" name="play-right-fill" color="#fff" size="32"></u-icon>
										</view>
									</view>
								</block>

								<!-- 分享信息 -->
								<block v-else-if="item.payload.data === 'share' && isJSON(item.payload.extension)">
									<view class="share-package" @click="onClickShareLink(item.payload.extension)">
										<image class="share-img" v-if="isJSON(item.payload.extension).imageUrl"
											:src="isJSON(item.payload.extension).imageUrl"></image>
										<view class="title"><text>{{isJSON(item.payload.extension).title}}</text></view>
									</view>
								</block>

							</block>
						</view>
					</view>
					<view class="tip-message"
						v-if="item.type === 'TIMGroupTipElem' && item.conversationType === 'GROUP' && item.payload.operationType === 6">
						<text class="text" v-if="item.payload.newGroupProfile.name">系统消息:{{item.nick}}修改群名称
							{{item.payload.newGroupProfile.name}}</text>
						<text class="text" v-else>系统消息:修改群资料</text>
					</view>
					<view class="tip-message"
						v-if="item.type === 'TIMGroupTipElem' && item.conversationType === 'GROUP' && item.payload.operationType === 1 && item.payload.nick">
						<text class="text">系统消息:{{item.payload.nick}}加入群聊</text>
					</view>
				</block>
				<view id="footer"></view>
			</scroll-view>
		</view>

		<!-- 底部菜单 -->
		<view class="footer">
			<view class="menu-box">
				<!-- #ifndef H5 -->
				<view class="btn-box mr-20" @click="switchChatType">
					<i-icon :icon="chatType === 'voice' ? 'iconyuyin' : 'iconjianpan'" size="50rpx" color="#8CA0B4">
					</i-icon>
				</view>
				<!-- #endif -->
				<view class="input-box">
					<input v-if="chatType === 'voice'" type="text" class="content" id="input" v-model="formData.content"
						:hold-keyboard="true" confirm-type="send" :confirm-hold="true"
						placeholder-style="color:#DDDDDD;" :cursor-spacing="10" :selection-end="selectionEnd"
						:auto-focus="autoFocus" @confirm="sendTextMsg" @focus="inputFocus" @blur="inputBlur"
						:adjust-position="false" />
					<view class="voice_title" v-if="chatType === 'keyboard'"
						:style="{ background: recording ? '#c7c6c6' : '#eee' }" @touchstart.stop.prevent="startVoice"
						@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice" @touchcancel.stop="cancelVoice">
						{{ voiceTitle }}
					</view>
				</view>
				<!-- 表情按钮 -->
				<view class="btn-box" @click="switchEmoji">
					<i-icon icon="iconbiaoqing" size="50rpx" color="#4AA3FF"></i-icon>
				</view>
				<view class="btn-send" @click="sendTextMsg" v-if="formData.content"><text>发送</text></view>
				<view class="btn-box ml-30" @click="switchFun" v-else>
					<i-icon icon="icongengduo1" size="50rpx" color="#4AA3FF"></i-icon>
				</view>
			</view>

			<!-- 抽屉 -->
			<view class="drawer-box">
				<!-- 表情 页面创建完成再显示 -->
				<block v-if="pageOnloadSuccess">
					<swiper class="emoji-swiper" :class="{show: !hideEmoji}" indicator-dots="true" duration="150">
						<swiper-item v-for="(page,pid) in emojiList" :key="pid">
							<view v-for="(em,eid) in page" :key="eid" @click="addEmoji(em)">
								<image mode="widthFix" :src="em.url"></image>
							</view>
						</swiper-item>
					</swiper>
				</block>

				<!-- 功能 -->
				<view class="fun-box" :class="{'show': showFunBtn}">
					<u-grid :col="4" hover-class="contentType2-hover-class" :border="false">
						<u-grid-item @click="chooseImage(['album', 'camera'])">
							<view class="icon">
								<i-icon icon="iconzhaopian" size="50rpx"></i-icon>
							</view>
							<view class="grid-text">照片</view>
						</u-grid-item>
						<u-grid-item @click="chooseVideo">
							<view class="icon">
								<i-icon icon="iconicon1" size="50rpx"></i-icon>
							</view>
							<view class="grid-text">拍摄</view>
						</u-grid-item>
						<u-grid-item @click="onClickCallPhone" v-if="imType === 'C2C'">
							<view class="icon">
								<i-icon icon="icondianhua-fuben" size="50rpx"></i-icon>
							</view>
							<view class="grid-text">通话</view>
						</u-grid-item>
						<u-grid-item v-if="imType === 'C2C' && userGroupInfo && timUserInfo.isService"
							@click="onClickGroup">
							<view class="icon">
								<i-icon icon="iconqunliao1" size="50rpx"></i-icon>
							</view>
							<view class="grid-text">群聊</view>
						</u-grid-item>
						<u-grid-item>
							<view class="icon">
								<i-icon icon="iconqiaquan" size="50rpx"></i-icon>
							</view>
							<view class="grid-text">卡券</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>

		<!-- 语音动画 -->
		<view class="voice_an" v-if="recording">
			<view class="voice_an_icon">
				<view id="one" class="wave"></view>
				<view id="two" class="wave"></view>
				<view id="three" class="wave"></view>
				<view id="four" class="wave"></view>
				<view id="five" class="wave"></view>
				<view id="six" class="wave"></view>
				<view id="seven" class="wave"></view>
			</view>
			<view class="text">{{voiceIconText}}</view>
		</view>

		<!-- 视频组件 -->
		<view class="video-box">
			<video id="video" :src="videoLink" controls @fullscreenchange="onFullscreenchange" :direction="0"></video>
		</view>
	</view>
</template>
<script src="./chat.js"></script>

<style lang="scss">
	@import './chat.scss';
</style>
